<!DOCTYPE html>
<html lang="en">

<head>
  <title>leaflet</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
    crossorigin="" />
  <link rel="stylesheet" href="./styles/map.css" type="text/css" />
  <link rel="stylesheet" href="./styles/timeline.css">

  <!-- Make sure you put this AFTER Leaflet's CSS -->
  <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
    crossorigin=""></script>
  </script>
</head>

<body>
  <div id="map"></div>
  <div class="time_line_box">
    <div class="time_line" style="width:100%;" draggable="false">
      <ol class='main_line' draggable="false">  <!-- 时间轴 -->
        <div class="drag_box" ondrop="drop(event)" ondragover="allowDrop(event)">     <!-- 高亮该时间轴的一段 -->
        </div>
      </ol>
    </div>
  </div>
  <script src="./js/map.js" type="text/javascript"></script>  <!-- 地图 -->
  <script src="./js/timeline.js" type="text/javascript"></script>   <!-- 时间轴 -->
  <script src="./js/request.js" type="text/javascript"></script><!-- 请求n次 -->
</body>

</html>